<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS传统布局（Float）</title>
    <link rel="stylesheet" href="../styles/normalize.css">
    <link rel="stylesheet" href="./styles/css14_layout_simple.css">
</head>

<body>
    <!-- 传统布局方式：div+css -->
    <!-- wrapper包装器通常用来定义宽度 -->
    <div class="wrapper">
        <div class="head">
            <h1>页面顶部</h1>
            <ul>
                <li>菜单项1</li>
                <li>菜单项2</li>
                <li>菜单项3</li>
                <li>菜单项4</li>
                <li>菜单项5</li>
            </ul>
        </div>
        <div class="main">
            <div class="outer">
                <div class="sidebar fl">
                    <ul>
                        <li>链接1</li>
                        <li>链接2</li>
                        <li>链接3</li>
                    </ul>
                </div>
                <div class="content fl">页面内容</div>
                <!-- <div class="cl"></div> -->
            </div>
            <div class="album">其他内容</div>
        </div>
        <div class="foot">
            <address>页面底部</address>
        </div>
    </div>
</body>

</html>